<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<img id="img" src="../img/1.jpg" alt="" width="500px" height="500px">

<div>
<img id="img2" src="../img/1.jpg" alt="" width="300px" height="300px">
<input id="btn1" type="button" value="启动">
<input id="btn2" type="button" value="暂停"><br><br>
</div>
</body>
</html>
<script type="text/javascript">
    var arr=["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg"];

    $(function () {
        time = null;
        $("#btn1").click(function () {
            time = window.setInterval("start()",500)
        });

        // $("#btn2").click(function () {
        //     window.clearInterval(time)
        //
        //     window.setTimeout("stop()",2000)
        // })
        $("#btn2").click(function () {

            window.clearInterval(time);

            window.setTimeout("stop()", 2000);
        });
    });
    var num = 0;
    function start() {
        $("#img").attr("src",arr[num])
        num++;
        if (num >= 4){
            num =0;
        }
    }
    function stop() {
      var imgArr =  $("#img").attr("src")
        $("#img2").attr("src",imgArr)
    }


</script>